<template>
  <div class="container" style="width: 1000px; margin: 0 auto">
    <!-- 轮播图 -->
    <div class="banner">
      <el-carousel :interval="5000" arrow="always">
        <el-carousel-item v-for="item in 4" :key="item">
          <img src="../assets/img/banner01.jpg" alt="" />
        </el-carousel-item>
      </el-carousel>
      <div class="banner-z">
        <div class="banner-zn">
          <!-- 图标还未引入 -->
          <p class="f1">保品种纯正</p>
          <p class="f1">担保交易</p>
          <p class="f1">30天保障</p>
          <p class="f1">先行赔付</p>
        </div>
      </div>
    </div>
    <!-- index-content -->
    <div class="index-content">
      <div class="content">
        <div class="index_dog">
          <div class="index-dog-img">
            <!-- <img src="../assets/img/dog01.png" alt=""> -->
          </div>
          <h3>狗狗</h3>
        </div>
        <div class="index_cat">
          <div class="index-cat-img"></div>
          <h3>猫咪</h3>
        </div>
      </div>
    </div>
    <!-- 热门狗狗猫猫 -->
    <!-- 外层大盒子 狗狗 -->
    <div class="hot_zoo" v-if="data">
      <div class="zoo_content_title">
        <h3>热门狗狗</h3>
        <span>为你寻觅优质萌宠 </span>
      </div>
      <!-- 版心 -->
      <div class="content_container">
        <!-- 内层的三个盒子 -->
        <div class="hot_zoo_row1">
          <!-- 文字区域 -->
          <div class="hot_zoo_row1_text" v-if="data">
            <h3>{{ data.data[8].shape }}犬</h3>
            <span>成年时体重不超过10公斤，身高在40厘米以下</span>
          </div>
          <!-- 图片区域 -->
          <div class="hot_zoo_row1_one" v-if="data">
            <div
              class="hot_zoo_row1_img"
              v-for="({ bid, breed_name }, index) in p"
              :key="bid"
              v-show="index < 4"
              @click="goto(index)"
            >
              <img src="../assets/img/IndhotG03.jpg" />
              <span>{{ breed_name }}</span>
            </div>
          </div>
        </div>
        <!-- 内层的三个盒子 -->
        <div class="hot_zoo_row1">
          <!-- 文字区域 -->
          <div class="hot_zoo_row1_text">
            <h3>{{ p[0].shape }}犬</h3>
            <span>成年时体重在11-30公斤，身高在40-60厘米</span>
          </div>
          <!-- 图片区域 -->
          <div class="hot_zoo_row1_one" v-if="data">
            <div
              @click="goto(index)"
              class="hot_zoo_row1_img"
              v-for="({ bid, breed_name }, index) in p"
              :key="bid"
              v-show="index > 4 && index <= 8"
            >
              <img src="../assets/img/Ndog08.jpg" />
              <span>{{ breed_name }}</span>
            </div>
          </div>
        </div>
        <!-- 内层的三个盒子 -->
        <div class="hot_zoo_row1">
          <!-- 文字区域 -->
          <div class="hot_zoo_row1_text">
            <h3>{{ p[5].shape }}犬</h3>
            <span>成年时体重在30-40公斤，身高在60-70厘米</span>
          </div>
          <!-- 图片区域 -->
          <div class="hot_zoo_row1_one" v-if="data">
            <div
              @click="goto(index)"
              class="hot_zoo_row1_img"
              v-for="({ bid, breed_name }, index) in p"
              :key="bid"
              v-show="index >= 4 && index <= 7"
            >
              <img src="../assets/img/Ndog02.jpg" alt="" />
              <span>{{ breed_name }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- </div> -->
    <!-- 热门猫猫 标题-->
    <div id="hot_cat">
      <div class="hot_zoo_cat">
        <h3>热门猫猫</h3>
        <span>为你寻觅优质萌宠</span>
      </div>
      <!-- 猫猫详情 内容-->
      <div class="zoo_hot_cat">
        <!-- 最外层管理三个大盒子 -->
        <div class="zoo_hot_row">
          <!-- 里面的三个小盒子 -->
          <div class="zoo_hot_row_item1">
            <div class="zoo_hot_row_item1_cat1">
              <img src="../assets/img/IndhotM02.jpg" alt="" />
              <h3>加菲猫</h3>
              <a href="#">查看更多></a>
            </div>
            <div class="zoo_hot_row_item1_cat2">
              <img src="../assets/img/IndhotM02.jpg" alt="" />
              <h3>蓝猫</h3>
              <a href="#">查看更多></a>
            </div>
          </div>
          <div class="zoo_hot_row_item2">
            <div class="zoo_hot_row_item2_cat">
              <img src="../assets/img/IndhotM03.jpg" alt="" />
              <h3>英国短毛猫</h3>
              <a href="#">查看更多></a>
            </div>
          </div>
          <div class="zoo_hot_row_item3">
            <div class="zoo_hot_row_item3_cat1">
              <img src="../assets/img/IndhotM04.jpg" alt="" />
              <h3>加菲猫</h3>
              <a href="">查看更多></a>
            </div>
            <div class="zoo_hot_row_item3_cat2">
              <img src="../assets/img/IndhotM05.jpg" alt="" />
              <h3>暹罗猫</h3>
              <a href="">查看更多></a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 最新上架 -->
    <div class="new_zoo_dog">
      <!-- 版心 -->
      <div class="new_container">
        <!-- 外面第一行标题行 -->
        <div class="new_content_row1">
          <h3>最新上架</h3>
          <span>为你寻觅优质萌宠</span>
        </div>
        <!-- 外面第二行标内容 -->
        <div class="new_content_row2" v-if="new_pet.data">
          <div
            class="new_zoo_item"
            v-for="({ cid, price, pname }, index) in new_pet.data"
            :key="index"
            v-show="index < 4"
            @click="gotonew(index)"
          >
            <img src="../assets/img/new_zoo.jpg" alt="" />
            <div class="new_zoo_item_text" v-if="new_pet">
              <span>最新官网上架</span>
              <span>精品萌宠</span>
            </div>
            <p class="age">1岁零5天</p>
            <p>{{ pname }}</p>
            <p class="num">¥{{ price }}/只</p>
          </div>
        </div>
      </div>
    </div>
    <div class="new_zoo_cat">
      <!-- 版心 -->
      <div class="new_container">
        <!-- 外面第一行标题行 -->
        <div class="new_content_row1">
          <h3>最新上架</h3>
          <span>为你寻觅优质萌宠</span>
        </div>
        <!-- 外面第二行标内容 -->
        <div class="new_content_row2">
          <div class="new_zoo_item">
            <img src="../assets/img/new_zoo.jpg" alt="" />
            <div class="new_zoo_item_text">
              <span>最新官网上架</span>
              <span>精品萌宠</span>
            </div>
            <p class="age">9月20天</p>
            <p>重庆苏格兰狮子猫</p>
            <p class="num">¥501/只</p>
          </div>
          <div class="new_zoo_item">
            <img src="../assets/img/new_zoo.jpg" alt="" />
            <div class="new_zoo_item_text">
              <span>最新官网上架</span>
              <span>精品萌宠</span>
            </div>
            <p class="age">9月20天</p>
            <p>重庆苏格兰狮子猫</p>
            <p class="num">¥501/只</p>
          </div>
          <div class="new_zoo_item">
            <img src="../assets/img/new_zoo.jpg" alt="" />
            <div class="new_zoo_item_text">
              <span>最新官网上架</span>
              <span>精品萌宠</span>
            </div>
            <p class="age">9月20天</p>
            <p>重庆苏格兰狮子猫</p>
            <p class="num">¥501/只</p>
          </div>
          <div class="new_zoo_item">
            <img src="../assets/img/new_zoo.jpg" alt="" />
            <div class="new_zoo_item_text">
              <span>最新官网上架</span>
              <span>精品萌宠</span>
            </div>
            <p class="age">9月20天</p>
            <p>重庆苏格兰狮子猫</p>
            <p class="num">¥501/只</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 购买卡片 -->
    <div class="sales_process_dog">
      <div class="sales_process_car">
        <img src="../assets/img/Nluicheng.jpg" alt="" />
      </div>
    </div>
    <div class="sales_process_cat">
      <div class="sales_process_car">
        <img src="../assets/img/Nluicheng01.jpg" alt="" />
      </div>
    </div>

    <!-- 优质萌宠  dog-->
    <!-- 最外层 -->
    <div class="good_pet">
      <!-- 版心 -->
      <div class="good_pet_container">
        <!-- 标题 -->
        <div class="good_pet_title">
          <h3>优质萌宠</h3>
          <div class="item">
            <a href="#">小型宠物</a>
            <span class="line">/</span>
            <a href="#">中型宠物</a>
            <span class="line">/</span>
            <a href="#">大型宠物</a>
            <span class="line">/</span>
            <a href="#">宠物家</a>
          </div>
        </div>
        <!-- 萌宠列表 -->
        <div class="good_pet_list" v-if="new_pet">
          <!-- 卡片 -->
          <div
            @click="gotonew(index)"
            class="good_pet_list_car"
            v-for="({ pname, price, cid }, index) in new_pet.data"
            :key="index"
          >
            <img src="../assets/img/new_zoo.jpg" alt="" />
            <div class="good_pet_list_text">
              <p>{{ pname }}</p>
              <span class="red">价格:¥{{ price }}/只</span>
              <span>地区:重庆市</span>
              <div>
                <a href="#">精品萌宠店</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 优质萌宠  cat-->
    <!-- 最外层 -->
    <div class="good_pet_cat">
      <!-- 版心 -->
      <div class="good_pet_container">
        <!-- 标题 -->
        <div class="good_pet_title">
          <h3>优质萌宠</h3>
          <div class="item">
            <a href="#">小型宠物</a>
            <span class="line">/</span>
            <a href="#">中型宠物</a>
            <span class="line">/</span>
            <a href="#">大型宠物</a>
            <span class="line">/</span>
            <a href="#">宠物家</a>
          </div>
        </div>
        <!-- 萌宠列表 -->
        <div class="good_pet_list">
          <!-- 卡片 -->
          <div class="good_pet_list_car">
            <img src="../assets/img/new_zoo.jpg" alt="" />
            <div class="good_pet_list_text">
              <p>重庆优质中华田园犬</p>
              <span class="red">价格:¥1500/只</span>
              <span>地区:重庆市</span>
              <div>
                <a href="#">精品萌宠店</a>
              </div>
            </div>
          </div>

          <div class="good_pet_list_car">
            <img src="../assets/img/new_zoo.jpg" alt="" />
            <div class="good_pet_list_text">
              <p>重庆优质中华田园犬</p>
              <span class="red">价格:¥1500/只</span>
              <span>地区:重庆市</span>
              <div>
                <a href="#">精品萌宠店</a>
              </div>
            </div>
          </div>

          <div class="good_pet_list_car">
            <img src="../assets/img/new_zoo.jpg" alt="" />
            <div class="good_pet_list_text">
              <p>重庆优质中华田园犬</p>
              <span class="red">价格:¥1500/只</span>
              <span>地区:重庆市</span>
              <div>
                <a href="#">精品萌宠店</a>
              </div>
            </div>
          </div>

          <div class="good_pet_list_car">
            <img src="../assets/img/new_zoo.jpg" alt="" />
            <div class="good_pet_list_text">
              <p>重庆优质中华田园犬</p>
              <span class="red">价格:¥1500/只</span>
              <span>地区:重庆市</span>
              <div>
                <a href="#">精品萌宠店</a>
              </div>
            </div>
          </div>
          <div class="good_pet_list_car">
            <img src="../assets/img/new_zoo.jpg" alt="" />
            <div class="good_pet_list_text">
              <p>重庆优质中华田园犬</p>
              <span class="red">价格:¥1500/只</span>
              <span>地区:重庆市</span>
              <div>
                <a href="#">精品萌宠店</a>
              </div>
            </div>
          </div>
          <div class="good_pet_list_car">
            <img src="../assets/img/new_zoo.jpg" alt="" />
            <div class="good_pet_list_text">
              <p>重庆优质中华田园犬</p>
              <span class="red">价格:¥1500/只</span>
              <span>地区:重庆市</span>
              <div>
                <a href="#">精品萌宠店</a>
              </div>
            </div>
          </div>
          <div class="good_pet_list_car">
            <img src="../assets/img/new_zoo.jpg" alt="" />
            <div class="good_pet_list_text">
              <p>重庆优质中华田园犬</p>
              <span class="red">价格:¥1500/只</span>
              <span>地区:重庆市</span>
              <div>
                <a href="#">精品萌宠店</a>
              </div>
            </div>
          </div>
          <div class="good_pet_list_car">
            <img src="../assets/img/new_zoo.jpg" alt="" />
            <div class="good_pet_list_text">
              <p>重庆优质中华田园犬</p>
              <span class="red">价格:¥1500/只</span>
              <span>地区:重庆市</span>
              <div>
                <a href="#">精品萌宠店</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div></div>
    <!--宠物知识 pet_kpa -->
    <div class="pet_kpa_dog">
      <!-- 版心 -->
      <div class="pet_lpa_container">
        <!-- 左边详情页 -->
        <div class="pet_kpa_dog_left">
          <!-- 左侧标题 -->
          <div class="pet_kpa_options">
            <span>狗狗知识</span>
            <span>猫猫知识</span>
            <span>其他宠物知识</span>
          </div>
          <!-- 图片和文字 -->
          <div class="pet_kpa_list">
            <!-- 图片 -->
            <div class="pet_kpa_list_img">
              <img src="../assets/img/pet_dog01.jpg" alt="" />
            </div>
            <!-- 文字 -->
            <div class="pet_kpa_list_text">
              <div class="pet_kpa_list_time">
                <h3>12</h3>
                <p>02-12</p>
              </div>
              <div class="pet_kpa_list_detail">
                <p> 
                  <a href="/Dog1">雪纳瑞小狗怎么养呢？雪纳瑞狗有什么优点？</a>
                   </p>
                <p>
                  在宠物市场上，我们经常可以看到很多雪纳瑞狗，雪纳瑞狗的品种也是比较多的，它主要有大中小三个品种。不同的雪纳瑞狗，它的特点也有很多不同之处，很多朋友比较关心雪纳瑞狗的饲养方法，当然了，我们可以完全放心，雪纳瑞狗的饲养方法是非常简单的。那么，雪纳瑞小狗怎么养呢？
                </p>
              </div>
            </div>
          </div>
          <div class="pet_kpa_list">
            <!-- 图片 -->
            <div class="pet_kpa_list_img">
              <img src="../assets/img/pet_dog01.jpg" alt="" />
            </div>
            <!-- 文字 -->
            <div class="pet_kpa_list_text">
              <div class="pet_kpa_list_time">
                <h3>12</h3>
                <p>02-12</p>
              </div>
              <div class="pet_kpa_list_detail">
                <p> <a href="/Dog1">雪纳瑞小狗怎么养呢？雪纳瑞狗有什么优点？</a> </p>
                <p>
                  在宠物市场上，我们经常可以看到很多雪纳瑞狗，雪纳瑞狗的品种也是比较多的，它主要有大中小三个品种。不同的雪纳瑞狗，它的特点也有很多不同之处，很多朋友比较关心雪纳瑞狗的饲养方法，当然了，我们可以完全放心，雪纳瑞狗的饲养方法是非常简单的。那么，雪纳瑞小狗怎么养呢？
                </p>
              </div>
            </div>
          </div>
          <div class="pet_kpa_list">
            <!-- 图片 -->
            <div class="pet_kpa_list_img">
              <img src="../assets/img/pet_dog01.jpg" alt="" />
            </div>
            <!-- 文字 -->
            <div class="pet_kpa_list_text">
              <div class="pet_kpa_list_time">
                <h3>12</h3>
                <p>02-12</p>
              </div>
              <div class="pet_kpa_list_detail">
                <p> <a href="/Dog1">雪纳瑞小狗怎么养呢？雪纳瑞狗有什么优点？</a> </p>
                <p>
                  在宠物市场上，我们经常可以看到很多雪纳瑞狗，雪纳瑞狗的品种也是比较多的，它主要有大中小三个品种。不同的雪纳瑞狗，它的特点也有很多不同之处，很多朋友比较关心雪纳瑞狗的饲养方法，当然了，我们可以完全放心，雪纳瑞狗的饲养方法是非常简单的。那么，雪纳瑞小狗怎么养呢？
                </p>
              </div>
            </div>
          </div>
          <div class="pet_kpa_list">
            <!-- 图片 -->
            <div class="pet_kpa_list_img">
              <img src="../assets/img/pet_dog01.jpg" alt="" />
            </div>
            <!-- 文字 -->
            <div class="pet_kpa_list_text">
              <div class="pet_kpa_list_time">
                <h3>12</h3>
                <p>02-12</p>
              </div>
              <div class="pet_kpa_list_detail">
                <a href="/Dog1">雪纳瑞小狗怎么养呢？雪纳瑞狗有什么优点？</a>
                <p>
                  在宠物市场上，我们经常可以看到很多雪纳瑞狗，雪纳瑞狗的品种也是比较多的，它主要有大中小三个品种。不同的雪纳瑞狗，它的特点也有很多不同之处，很多朋友比较关心雪纳瑞狗的饲养方法，当然了，我们可以完全放心，雪纳瑞狗的饲养方法是非常简单的。那么，雪纳瑞小狗怎么养呢？
                </p>
              </div>
            </div>
          </div>
        </div>
        <!-- 左边详情页 -->
        <div class="pet_kpa_dog_right">
          <div class="pet_kpa_dog_right">
            <h3>官网资讯</h3>
            <img src="../assets/img/Default-display-image.jpg" alt="" />
          </div>
          <div>
            <h3>
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Reprehenderit, commodi voluptate delectus vel consectetur quo
              similique adipisci pariatur vero aperiam recusandae perferendis
              nisi? Laborum, doloribus! Laborum consequuntur at non beatae!
            </h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "../assets/css/reset.css";
export default {
  computed: {
    p() {
      return this.data.data;
    },
  },

  data() {
    return {
      data: null,
      new_pet: null,
    };
  },
  mounted() {
    this.getData();
    this.getNew();
  },
  methods: {
    gotonew(index) {
      let cid = this.new_pet.data[index].cid;
      // console.log(cid);
      this.$router.push(`/pet_detail?type_id=1&cid=${cid}`);
    },
    goto(index) {
      let bid = this.data.data[index].bid;

      this.$router.push(`/buydog?type_id=1&bid=${bid}`);
    },
    getData() {
      this.axios.get("/v1/type/pet_size").then((res) => {
        console.log("宠物大小:", res);
        this.data = res.data;
      });
    },
    getNew() {
      this.axios.get(`/v1/type/new_pet`).then((res) => {
        console.log("热门宠物:", res);
        this.new_pet = res.data;
      });
    },
  },
};
</script>

<style scoped src="">
@import url("../assets/css/top.css");
</style>
<style lang="scss" scoped></style>
